// 页头
let icon2_a = $('.icon2_a')
let icon2_b = $('.icon2_b')
let icon2_c = $('.icon2_c')
let icon2_a1 = $('.icon2_a1')
let icon2_b1 = $('.icon2_b1')
let icon2_c1 = $('.icon2_c1')

// 微博二维码
icon2_a.on('mouseover', function() {
    icon2_a1.show()
    $(this).addClass('icon_current')


})
icon2_a.on('mouseout', function() {
    icon2_a1.hide()
    $(this).removeClass('icon_current')

})

//微信二维码 
icon2_b.on('mouseover', function() {
    icon2_b1.show()
    $(this).addClass('icon_current')
})
icon2_b.on('mouseout', function() {
    icon2_b1.hide()
    $(this).removeClass('icon_current')
})

// 手机二维码
icon2_c.on('mouseover', function() {
    icon2_c1.show()
    $(this).addClass('icon3_current')
})
icon2_c.on('mouseout', function() {
    icon2_c1.hide()
    $(this).removeClass('icon3_current')
})



// ******************************************************
// dog
function dog() {
    let timerOut;
    let timer;
    let cindex = 0;
    let dog_banner_span = document.querySelectorAll('.dog1 span');
    let dog_banner_container = document.querySelector('.dog2');
    let dog_banner = document.querySelector('.dog3');
    // 


    function autoPlay() {
        timer = setInterval(() => {
            cindex++;
            if (cindex == 3) {
                cindex = 0;
            }
            dog_banner_span.forEach(function(item, index) {
                item.classList.remove('banner_page_active');
            })
            dog_banner_span[cindex].classList.add('banner_page_active');
            dog_banner_container.style.transform = `translateX(${cindex*-360}px)`
        }, 4500);

    }
    dog_banner_span.forEach(function(item, index) {
        item.addEventListener('mouseover', function() {
            clearTimeout(timerOut);

            item.classList.add('banner_page_active');
            timerOut = setTimeout(function() {
                dog_banner_span.forEach(function(item, index) {
                    item.classList.remove('banner_page_active')
                })
                item.classList.add('banner_page_active');
                dog_banner_container.style.transform = `translateX(${index*-360}px)`
            }, 250)
        })
    })
    autoPlay();
    dog_banner.addEventListener('mouseenter', function() {
        clearInterval(timer);
    })
    dog_banner.addEventListener('mouseleave', function() {
        autoPlay();
    })
}
dog()

// cat
function cat() {
    let timerOut;
    let timer;
    let cindex = 0;
    let dog_banner_span = document.querySelectorAll('.cat01 span');
    let dog_banner_container = document.querySelector('.cat02');
    let dog_banner = document.querySelector('.cat03');
    // 


    function autoPlay() {
        timer = setInterval(() => {
            cindex++;
            if (cindex == 3) {
                cindex = 0;
            }
            dog_banner_span.forEach(function(item, index) {
                item.classList.remove('banner_page_active');
            })
            dog_banner_span[cindex].classList.add('banner_page_active');
            dog_banner_container.style.transform = `translateX(${cindex*-360}px)`
        }, 4500);

    }
    dog_banner_span.forEach(function(item, index) {
        item.addEventListener('mouseover', function() {
            clearTimeout(timerOut);

            item.classList.add('banner_page_active');
            timerOut = setTimeout(function() {
                dog_banner_span.forEach(function(item, index) {
                    item.classList.remove('banner_page_active')
                })
                item.classList.add('banner_page_active');
                dog_banner_container.style.transform = `translateX(${index*-360}px)`
            }, 250)
        })
    })
    autoPlay();
    dog_banner.addEventListener('mouseenter', function() {
        clearInterval(timer);
    })
    dog_banner.addEventListener('mouseleave', function() {
        autoPlay();
    })
}
cat()

function xc() {
    let timerOut;
    let timer;
    let cindex = 0;
    let dog_banner_span = document.querySelectorAll('.xc01 span');
    let dog_banner_container = document.querySelector('.xc02');
    let dog_banner = document.querySelector('.xc03');
    // 


    function autoPlay() {
        timer = setInterval(() => {
            cindex++;
            if (cindex == 3) {
                cindex = 0;
            }
            dog_banner_span.forEach(function(item, index) {
                item.classList.remove('banner_page_active');
            })
            dog_banner_span[cindex].classList.add('banner_page_active');
            dog_banner_container.style.transform = `translateX(${cindex*-360}px)`
        }, 4500);

    }
    dog_banner_span.forEach(function(item, index) {
        item.addEventListener('mouseover', function() {
            clearTimeout(timerOut);

            item.classList.add('banner_page_active');
            timerOut = setTimeout(function() {
                dog_banner_span.forEach(function(item, index) {
                    item.classList.remove('banner_page_active')
                })
                item.classList.add('banner_page_active');
                dog_banner_container.style.transform = `translateX(${index*-360}px)`
            }, 250)
        })
    })
    autoPlay();
    dog_banner.addEventListener('mouseenter', function() {
        clearInterval(timer);
    })
    dog_banner.addEventListener('mouseleave', function() {
        autoPlay();
    })
}
xc()

function sz() {
    let timerOut;
    let timer;
    let cindex = 0;
    let dog_banner_span = document.querySelectorAll('.sz01 span');
    let dog_banner_container = document.querySelector('.sz02');
    let dog_banner = document.querySelector('.sz03');
    // 


    function autoPlay() {
        timer = setInterval(() => {
            cindex++;
            if (cindex == 3) {
                cindex = 0;
            }
            dog_banner_span.forEach(function(item, index) {
                item.classList.remove('banner_page_active');
            })
            dog_banner_span[cindex].classList.add('banner_page_active');
            dog_banner_container.style.transform = `translateX(${cindex*-360}px)`
        }, 4500);

    }
    dog_banner_span.forEach(function(item, index) {
        item.addEventListener('mouseover', function() {
            clearTimeout(timerOut);

            item.classList.add('banner_page_active');
            timerOut = setTimeout(function() {
                dog_banner_span.forEach(function(item, index) {
                    item.classList.remove('banner_page_active')
                })
                item.classList.add('banner_page_active');
                dog_banner_container.style.transform = `translateX(${index*-360}px)`
            }, 250)
        })
    })
    autoPlay();
    dog_banner.addEventListener('mouseenter', function() {
        clearInterval(timer);
    })
    dog_banner.addEventListener('mouseleave', function() {
        autoPlay();
    })
}
sz()

function pc() {
    let timerOut;
    let timer;
    let cindex = 0;
    let dog_banner_span = document.querySelectorAll('.pc01 span');
    let dog_banner_container = document.querySelector('.pc02');
    let dog_banner = document.querySelector('.pc03');
    // 


    function autoPlay() {
        timer = setInterval(() => {
            cindex++;
            if (cindex == 3) {
                cindex = 0;
            }
            dog_banner_span.forEach(function(item, index) {
                item.classList.remove('banner_page_active');
            })
            dog_banner_span[cindex].classList.add('banner_page_active');
            dog_banner_container.style.transform = `translateX(${cindex*-360}px)`
        }, 4500);

    }
    dog_banner_span.forEach(function(item, index) {
        item.addEventListener('mouseover', function() {
            clearTimeout(timerOut);

            item.classList.add('banner_page_active');
            timerOut = setTimeout(function() {
                dog_banner_span.forEach(function(item, index) {
                    item.classList.remove('banner_page_active')
                })
                item.classList.add('banner_page_active');
                dog_banner_container.style.transform = `translateX(${index*-360}px)`
            }, 250)
        })
    })
    autoPlay();
    dog_banner.addEventListener('mouseenter', function() {
        clearInterval(timer);
    })
    dog_banner.addEventListener('mouseleave', function() {
        autoPlay();
    })
}
pc()

// 右边侧栏

function rightSide() {
    let flag = true;

    $(window).on('scroll', function() {
        let sctop = $(window).scrollTop()
            // console.log(sctop);

        if (sctop > 50) {
            $('.rightside .goTop').css('display', 'block')
        } else {
            $('.rightside .goTop').css('display', 'none')
        }
    })

    // 点击返回顶部
    $('.rightside .goTop').on('click', function() {
        $('body,html').animate({
                scrollTop: 0
            },
            500);
        return false;
    })

    // $('.floor').each(function(index,item){

    // })
    $(".rightside .side_sp").click(function() {

        // 点击li页面也会滚动，就会触发页面滚动事件，会执行eachTool()里的背景选择
        // 所以点击li后让flag为false，禁止执行eachTool()里的内容
        flag = false;

        // $(this).index()获取用户当前点击的li的索引，正好对应的就是相应模块索引
        // 得到相应模块索引就可以算出这个模块距离顶部的高度，赋值给current
        var current = $(".floor").eq($(this).index()).offset().top; // $(".floor").eq(index) 选择器，选择第几个元素
        $("html").stop().animate({ // 调用动画前先stop()停止其他未完成的动画（解决排队问题）
            scrollTop: current
        }, function() { // 回调函数，动画执行完后执行
            flag = true; // 让flag变为true，不然flag永远是false，没办法执行eachTool()里的内容
        })


    })

}
rightSide()